<template>
<BaseSideBlock title="农田管理" iconUrl="">
    <template #content class="allLineProess-content">
        <div class="allLineProess " >
            <div   >
              <span>{{ szjdVal }}%</span><br/>
              <span>生长进度</span>
            </div>
            <div  >
              <span>{{ jkdVal }}%</span><br/>
              <span>健康度</span>
            </div>
        </div>
        <div class="side-content-label side-block-head" >
            <div class="title">通知公告</div>
        </div>
        <div class="side-content scroller">
          <div  >
            <div
                v-for="(item,index) in dwDatas"
                :key="'SideBlockNewTZGG'+index"
                class="side-content-list">
              <!--            <div class="label">{{item.label}}</div>-->
              <div class="value">{{index}}.{{item.name}}</div>
            </div>
            <div
                v-for="(item,index) in dwDatas"
                :key="'SideBlockNewTZGGTwo'+index"
                class="side-content-list">
              <!--            <div class="label">{{item.label}}</div>-->
              <div class="value">{{index}}.{{item.name}}</div>
            </div>
          </div>
        </div>
    </template>
</BaseSideBlock>
</template>

<script>
import BaseSideBlock from '../index.vue'

export default {
    name: "SideBlockNewNTGLXX",
    components: {
        BaseSideBlock
    },
    data() {
        return {
            dwDatas: [{
                type: '建设单位',
                name: '24.01.17-农田播种工作例会',
                pdfUrl: 'http://111.30.79.43:60036//data/test/2024/0115/11/112451_169002_OrgeQlf.pdf'
            }, {
                type: '勘察单位',
                name: '国务院关于印发“十四五”推进农业农村现代化规划的通知',
                pdfUrl: 'http://111.30.79.43:60036//data/test/2018/1205/10/100656_275549_iKISvtf.pdf'
            }, {
                type: '设计单位',
                name: '农业农村部关于落实中共中央国务院关于学习运用“千村示范、万村整治”工程经验有力有效推进乡村全面振兴工作部署',
                pdfUrl: 'http://111.30.79.43:60036//data/test/2018/1205/10/100711_51381_RjtDjXf.pdf'
            }, {
                type: '施工单位',
                name: '2024年中央一号文件公布 提出有力有效推进乡村全面振兴“路线图”',
                pdfUrl: 'http://111.30.79.43:60036//data/test/2018/1205/10/100641_3025966_MXcvTlf.pdf'
            }, {
                type: '监理单位',
                name: '人口计生委　财政部关于印发《农村部分计划生育家庭奖励扶助制度试点方案(试行)》的通知',
                pdfUrl: 'http://111.30.79.43:60036//data/test/2018/1205/10/100622_719166_PnIHRef.pdf'
            }],
            szjdVal:12,
            jkdVal:90,
        }
    },
    created() {},
    mounted() {},
    watch: {},
    computed: {},
    methods: {
    },
}
</script>

<style lang="scss" scoped>
.allLineProess-content{
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.allLineProess{
    height: 10vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    div{
        background: url(/src/assets/img/boxProcess.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        font-size: 16px;
        color: #f1f1f1;
        width: 45%;
        height: 90%;
        padding: 5% 0 0 0;
    }
}
.side-content-label{
    height: 3.5vh;
    left: 0.3vw;
    margin: 0 0.7vw;
    width: calc(100% - 0.9vw);
    background: url(/src/assets/img/rightTopLabel.png) no-repeat;
    background-size: 98% 100%;
    .title{
      color: white;
      font-size: 18px;
      font-weight: 600;
    }
}
@keyframes slide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 15vh));
  }
}
.side-content {
    max-height: calc(100% - 14vh);
    overflow-y: hidden;
    padding: 0 10px 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    >div{
      animation: slide 40s linear infinite;
    }

    .side-content-panel {
        margin-bottom: 5px;
        font-size: 12px;
        color: #F1F1F1;
        background: #2c62978f;
        padding: 0px 3px;
    }
    .side-content-list{
        //background-image: linear-gradient(270deg, rgba(51,133,255,0.00) 14%, #2178f9f2 95%);
        //border-bottom: 1px solid #3385FF;
        background: url(/src/assets/img/InfoList.png) no-repeat;
        background-size: 100% 100%;
        padding: 0.2vh 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0.2vh 0;
        justify-content: flex-start;
        div{
            padding: 0.4vh 0.4VW;
            color: #F1F1F1;
        }
        .label{
            text-align: end;
            width: 5VW;
        }
    }
}
</style>
